<html>
    <head>
        <title>基本示例</title>
    </head>
    <body>
        <script>
             // 一、基本示例
                          // 下面是一个Vue组件的示例：
                          Vue.component('button-counter',{
                                    data:function(){
                                      return{
                                        count:0
                                      }
                                    },
                                    template:'<button v-on:click="count++">You clicked me {{count}} times</button>'
                                })

                          /*
                              组件时可复用的Vue实例，且带有一个名字。

                              我们可以在一个通过 new Vue 创建的Vue根实例中，把这个组件作为自定义元素来使用。

                          */ 
                                /*
                                      <div id="components-demo">
                                        <button-counter></button-counter>
                                      </div>
                                */
                                      new Vue({
                                        el:'#components-demo'
                                      });
                            /*
                                组件是"可复用的Vue实例"，所以它们与 new Vue() 接收相同的选项。
                                例如  data、computed、watch、methods、生命周期钩子等。

                                仅有的例外是像 el 这样根实例特有的选项。
                            */

        </script>
    </body>
</html>